<template>
	<div class="userComp-eventBus-eventBusDemo">
        <div class="author-demo">
            <div>作者：黄彪</div>
            <div>日期：2017/11/02</div>
        </div>

        <Button @click="testBus" type="primary">测试bus总线</Button>

        <HR/>

        <div>
            <h3>在顶级组件App.vue 组件中添加绑定的事件</h3>
            <pre>
                <code class="javascript" v-text="jsCodeApp">
                </code>
            </pre>
        </div>

        <div>
            <h3>在当前组件中触发事件</h3>
            <pre>
                <code class="javascript" v-text="jsCodeCurrent">
                </code>
            </pre>
        </div>

	</div>
</template>

<script>
    import hljs from 'highlight.js'
    export default {
        // 挂载组件
        mounted: function () {
            window.setTimeout(function () {
                $('.userComp-eventBus-eventBusDemo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
        },
        data: function(){
            return {
//                APP组件的代码，添加绑定的事件
                jsCodeApp:'' +
                'export default {\n' +
                '  // 创建节点触发的事件\n' +
                '  created: function () {\n' +
                '\t  this.$bus.on("huangbiao-test", function () {\n' +
                '\t\t  alert("huangbiao-test");\n' +
                '\t\t  console.dir(arguments);\n' +
                '\t  })\n' +
                '  },\n' +
                '  // 销毁节点触发的事件，防止 一个事件的队列函数无限添加\n' +
                '  beforeDestroy: function () {\n' +
                '\t  this.$bus.off("huangbiao-test");\n' +
                '  },\n' +
                '}',

                // 当前对象触发事件
                jsCodeCurrent:'' +
                'export default {\n' +
                '\tmethods: {\n' +
                '\t\ttestBus :function () {\n' +
                '\t\t\tthis.$bus.emit("huangbiao-test",\'arg1\',\'arg-2\',\'arg33\');\n' +
                '\t\t}\n' +
                '\t}\n' +
                '}\n',
            }
        },
        // 方法
        methods: {
            testBus :function () {
                this.$bus.emit("huangbiao-test",'arg1','arg-2','arg33');
            }
        }
    }
</script>

<style scoped>
    .userComp-eventBus-eventBusDemo{

    }
</style>
